<template>
  <div>
    <TopTool>
      <template #left>
        <div class="flex gc-2">
          <div class="system__icon" @click="goBack">
            <LeftOutlined />
          </div>
          <div class="system__icon" @click="goGenHome">
            <HomeOutlined />
          </div>
        </div>
      </template>
      <template #right>
        <a-button type="primary" @click="next">
          <RightOutlined />
        </a-button>
      </template>
    </TopTool>
    <a-card class="mt-2 p-4">
      <a-table
        :columns="formatColumns(fieldColumns, false)"
        :data-source="data"
        row-key="columnId"
        v-model:expanded-row-keys="expandKeys"
        @expand="onExpand"
      >
        <template #expandedRowRender="{ record }">
          <a-card title="附加选项">
            <a-form>
              <a-row :gutter="12">
                <a-col :span="8">
                  <a-form-item label="输入框类型">
                    <div>
                      <a-select
                        :options="htmlTypeOptions"
                        v-model:value="record.htmlType"
                      ></a-select>
                    </div>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="数据类型">
                    <div>
                      <a-select
                        :options="dataTypesOptions"
                        allow-clear
                        v-model:value="record.javaType"
                      ></a-select>
                    </div>
                  </a-form-item>
                </a-col>
                <a-col :span="8" v-if="record.htmlType === 'select'">
                  <a-form-item label="字典数据">
                    <div>
                      <a-select
                        allow-clear
                        :options="dictOptions"
                        v-model:value="record.dictType"
                      ></a-select>
                    </div>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-card>
        </template>
        <template #bodyCell="{ record, column }">
          <template v-if="switchBoxList.includes(`${column.dataIndex}`)">
            <Checkbox v-model="record[`${column.dataIndex}`]" />
          </template>
          <template v-else-if="column.dataIndex === 'fieldTitle'">
            <a-input v-model:value="record.fieldTitle"></a-input>
          </template>
          <template v-else-if="column.dataIndex === 'operation'">
            <a-button type="text">
              <MoreOutlined />
            </a-button>
          </template>
        </template>
      </a-table>
    </a-card>

    <a-modal v-model:open="visible"></a-modal>
  </div>
</template>

<script setup lang="ts">
import { formatColumns } from '@/utils/table/table';
import { MoreOutlined } from '@ant-design/icons-vue';
import { fieldColumns } from '../data/columns';
import { GenStepEnum, nextStep } from '../data/config';
import { getDictOptions, goGenHome } from '../data/curd';
import { codeFormData } from '../data/data';
import { dataTypesOptions, htmlTypeOptions } from '../data/options';
import Checkbox from './components/Checkbox.vue';
import TopTool from './components/TopTool.vue';

const switchBoxList = ['isInsert', 'isQuery', 'isList', 'isRequired', 'isPk'];
const visible = ref(false);

const dictOptions = ref();

const expandKeys = ref<string[]>([]);
const next = () => {
  nextStep(GenStepEnum.CODE);
};
const onExpand = (_: boolean, record: CodeColumn) => {
  expandKeys.value.push(record.columnId);
};
const goBack = () => {
  nextStep(GenStepEnum.BASE);
};

getDictOptions(dictOptions);

const data = computed(() => {
  return codeFormData.value.info.columns.map(e => {
    if (!e.fieldTitle) {
      e.fieldTitle = e.columnComment || e.columnName;
    }
    return e;
  });
});
</script>

<style lang="scss" scoped>
:deep(.ant-card) {
  box-shadow: none;
}
</style>
